<template>
<div class="whole">
  <div class="form">
    <h2>注册</h2>
    <a-form :form="form" @submit="handleSubmit">
    <a-form-item v-bind="formItemLayout" label="E-mail">
      <a-input
        v-decorator="[
          'email',
          {
            rules: [
              {
                type: 'email',
                message: '输入应为邮箱格式!',
              },
              {
                required: true,
                message: '请输入你的注册邮箱！',
              },
            ],
          },
        ]"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="Password" has-feedback>
      <a-input
        v-decorator="[
          'password',
          {
            rules: [
              {
                required: true,
                message: '请输入你的密码！',
              },
              {
                validator: validateToNextPassword,
              },
              {
                max: 16,
                min: 6,
                message: '密码应为6到16位'
              }
            ],
          },
        ]"
        type="password"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="Confirm Password" has-feedback>
      <a-input
        v-decorator="[
          'confirm',
          {
            rules: [
              {
                required: true,
                message: '请确认你的密码！',
              },
              {
                validator: compareToFirstPassword,
              },
              
            ],
          },
        ]"
        type="password"
        @blur="handleConfirmBlur"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout">
      <span slot="label">
        Nickname&nbsp;
        <a-tooltip title="What do you want others to call you?">
          <a-icon type="question-circle-o" />
        </a-tooltip>
      </span>
      <a-input
        v-decorator="[
          'nickName',
          {
            rules: [{ required: true, message: '请输入你的昵称', whitespace: true }],
          },
        ]"
      />
    </a-form-item>
    <a-form-item v-bind="tailFormItemLayout">
      <a-checkbox  v-decorator="['agreement', { valuePropName: 'checked' }]">
        I have read the
        <router-link :to="{path:'/aggrement'}">agreement</router-link>
      </a-checkbox>
    </a-form-item>
    <a-form-item v-bind="tailFormItemLayout">
      <a-space>
        <a-button type="primary" html-type="submit">
        注册
      </a-button>
      <a-button type="primary" @click="toLogin">
        返回
      </a-button>
      </a-space>

    </a-form-item>
  </a-form>
  </div>
 
</div>
 
</template>

<script>

export default {
  data() {
    return {
      confirmDirty: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'register' });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          const {data:res} = await this.$http.post("http://localhost:8081/user/register",this.$qs.stringify(values))
          if(res.code == 200){
            this.$message.success('注册成功')
            this.$router.push('/success')
          }
          else if (res.code == 300){
            this.$message.warning('该用户已存在')
          }
          else if(res.code == 400){
            this.$message.errot('注册失败')
          }

        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue('password')) {
        callback('前后两次密码不一致');
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
      }
      callback();
    },
    toLogin(){
      this.$router.push('/login')
    }
  },
};
</script>
<style lang="less" scoped>
.whole{
  height: 100%;
  background-color: #2b4b6b;
}
.form{
  width:60%;
  position: relative;
  top: 10%;
  left: 13%;
}
h2{
  font-family: '隶书';
  font-size: 40px;
  position: relative;
  left: 15%;
}
</style>